<template>
  <view :style="my_style">
    <view class="bg-white u-m-b-24 u-rela">
      <view
        class="cell u-p-l-24 u-p-r-24 border-bottom1"
        v-for="(item, index) in info_list"
        :key="index"
      >
        <text class="label">{{ item.label }}</text>
        <view class="u-flex-1 u-text-right">{{ form[item.key] }}</view>
      </view>
    </view>
    <view class="cell u-p-l-24 u-p-r-24 border-bottom1 u-m-t-20">
      <text class="label">接收邮箱</text>
      <view class="u-flex-1 u-text-right">{{ form.invoice_email }}</view>
    </view>
    <template v-if="form.invoice_type === 1">
      <view class="cell u-p-l-24 u-p-r-24 border-bottom1">
        <text class="label">收票人手机号</text>
        <view class="u-flex-1 u-text-right">{{ form.invoice_mobile }}</view>
      </view>
      <view class="cell u-p-l-24 u-p-r-24 border-bottom1 u-m-b-20">
        <text class="label">所在地址</text>
        <view class="u-flex-1 u-text-right">{{ form.invoice_full_address }}</view>
      </view>
    </template>
    <view class="cell u-p-l-24 u-p-r-24 border-bottom1">
      <view class="flex" @click="show_content = true">
        <text class="u-m-r-12">发票内容</text>
        <u-icon name="question-circle" color="#999" size="32"></u-icon>
      </view>
      <view class="u-flex-1 u-text-right">明细</view>
    </view>
    <!-- 发票内容说明 -->
    <content-pop :show.sync="show_content" />
  </view>
</template>

<script>
  import ContentPop from '@/views/components/invoice/ContentPop.vue'
  export default {
    data() {
      return {
        id: '',
        type: 1,
        show_content: false,
        info_list: [
          {
            label: '发票类型：',
            key: 'invoice_type_name',
          },
          {
            label: '抬头类型：',
            key: 'invoice_title_type_name',
          },
        ],
        person: [
          {
            label: '发票抬头：',
            key: 'invoice_title',
          },
        ],
        company: [
          {
            label: '发票抬头：',
            key: 'invoice_title',
          },
          {
            label: '税号：',
            key: 'taxpayer_number',
          },
          {
            label: '开户银行：',
            key: 'open_bank',
          },
          {
            label: '银行账号：',
            key: 'bank_account',
          },
          {
            label: '注册地址：',
            key: 'company_address',
          },
          {
            label: '注册电话：',
            key: 'company_phone',
          },
        ],
        form: {
          is_tax_invoice: 1,
          invoice_type: 2, // 2 电子  1纸质
          invoice_title_type: 1, // 1个人 2单位
          invoice_title: '', // 抬头
          taxpayer_number: '', // 税号
          invoice_full_address: '', // 邮寄地址
        },
        title: '发票信息',
      }
    },
    onLoad(options) {
      this.id = options.id
      this.getOrderInvoiceInfo()
    },
    components: {
      ContentPop,
    },
    methods: {
      // 获取发票详情
      async getOrderInvoiceInfo() {
        const { code, data } = await this.$api.common.order('getOrderInvoiceInfo', {
          invoice_id: this.id,
        })
        if (code === 200) {
          this.form = data
          this.form.invoice_type_name =
            data.invoice_type === 2 ? '增值税电子普通发票' : '增值税专用发票'
          this.form.invoice_title_type_name = data.invoice_title_type == 1 ? '个人' : '企业'
          if (data.invoice_title_type == 1) {
            this.info_list.splice(2, 0, ...this.person)
          } else {
            this.info_list.splice(2, 0, ...this.company)
          }
        }
      },
      //  新增/编辑发票信息
      async newInvoice() {
        let params = {
          invoice_id: this.id || '',
          ...this.form,
        }
        if (!params.invoice_title) {
          this.showMsg('请填写准确的抬头名')
          return
        }
        if (params.invoice_title_type === 2) {
          if (!params.taxpayer_number) {
            this.showMsg('请填写税号')
            return
          }
        }
        if (!params.invoice_full_address && params.invoice_type === 1) {
          this.showMsg('请填写发票邮寄地址')
          return
        }
        if (!params.invoice_email && params.invoice_type === 2) {
          this.showMsg('请填写发票发送邮件')
          return
        }
        const res = await this.$api.common.order(
          this.id ? 'editOrderInvoice' : 'createOrderInvoice',
          params
        )
        if (res.code === 200) {
          this.showMsg(res.message)
          this.back()
        }
      },
      // 删除发票
      async deleteOrderInvoice() {
        let params = {
          invoice_id: this.id,
        }
        const res = await this.$api.common.order('deleteOrderInvoice', params)
        if (res.code === 200) {
          this.show_del = false
          this.$u.toast('删除成功')
          this.back()
        }
      },
      // 返回上一页
      back() {
        // 获取页面栈
        var pages = getCurrentPages()
        if (pages.length > 1) {
          // 上一个页面实例对象
          var prePage = pages[pages.length - 2]
          // 触发上个界面
          // #ifdef H5
          prePage.refresh()
          // #endif
          // #ifdef MP-WEIXIN||APP-PLUS
          prePage.$vm.refresh()
          // #endif
        }
        uni.navigateBack()
      },
    },
  }
</script>

<style lang="scss">
  // 状态
  .status-box {
    position: absolute;
    top: 24rpx;
    right: 0;
    padding: 8rpx 20rpx;
    background: rgba(176, 210, 69, 0.1);
    border-radius: 200rpx 0 0 200rpx;
  }

  .cell {
    display: flex;
    height: 100rpx;
    font-size: 32rpx;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;

    ::v-deep .u-radio__label {
      font-size: 24rpx;
    }

    &:last-child {
      border-bottom: none;
    }

    .label {
      width: 192rpx;
    }
  }
</style>
